<template>
	<div class="personnelAdd">
		<div class="header_ContentBox pl_10 pr_10">
			<i class="lhadmin lhadmin-renzheng Icon"></i>
			<span class="pl_10 pr_10">/</span>
			<span class="header_text">B端-商户 / 商户管理 / 账号管理 / 新增账号</span>
		</div>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">基本信息</h4>
			</div>
			<div class="pt_10">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>手机号码</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.mobile"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>姓名</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.name"></el-input>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>角色</div>
					<div class="fl list-cont">
						<el-select v-model="dataMes.role">
							<el-option v-for="(item, key, index) in permissArr" :label="item" :value="key" :key="index"></el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear" v-if="dataMes.role == 100 || dataMes.role == 101">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>所属商户</div>
					<div class="fl list-cont">
						<el-autocomplete
							class="inline-input"
							v-model="dataMes.business_name"
							:fetch-suggestions="querySearch3"
							placeholder=""
							:trigger-on-focus="true"
							@select="handleSelect3"
							:disabled="showType"
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear" v-if="dataMes.role == 102">
					<div class="fl title-key">所属店铺</div>
					<div class="fl list-cont">
						<el-select
							placeholder="请选择"
							filterable
							multiple
							v-model="selects"
							:remote="true"
							:remote-method="shopInput"
						>
							<el-option v-for="(item, index) in shopList" :label="item.name" :value="item.id" :key="index">{{
								item.name
							}}</el-option>
						</el-select>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key">Email</div>
					<div class="fl list-cont">
						<el-input v-model="dataMes.email"></el-input>
					</div>
				</div>
			</div>
			<div class="ml_110 mt_80">
				<span class="resetBtn mr_10" @click="back">返回</span>
				<span class="btnOK" @click="submitBtn">保存</span>
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { fetchShopList } from '@/api/shop.js'
import { PERMISSARR } from '@/utils/util.js'

export default {
	name: 'MerchantsEdit',
	data() {
		return {
			id: '',
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			//相关数据
			dataMes: {
				mobile: '',
				name: '',
				business_id: '',
				business_sn: '',
				business_name: '',
				email: '',
				role: ''
			},
			merchantsList: [], //销售列表
			shopList: [], //店铺列表
			selects: [],
			showType: false,
			permissArr: PERMISSARR,
			editShopList: []
		}
	},
	mounted() {
		this.id = this.$route.query.id //接收传参
		this.getMerchants()
		this.startResult()
	},
	methods: {
		startResult() {
			// 请求商户详情接口
			let fn = new FormData()
			fn.append('id', this.$route.query.id) //获取id
			this.$http.post(this.url + '/shopUser/info', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						const {
							mobile,
							name,
							role_id,
							business_id,
							business_name,
							business_sn,
							email,
							shops,
							shop_names
						} = res.data.data
						this.dataMes.mobile = mobile
						this.dataMes.name = name
						this.dataMes.role = role_id + ''
						this.dataMes.business_id = business_id
						this.dataMes.business_name = business_name
						this.dataMes.business_sn = business_sn
						this.dataMes.email = email
						this.selects = shops
						this.shopList = shop_names
						this.editShopList = shop_names

						if (this.manageInfo.user_info.type == 2) {
							// 是代理商，默认显示中服云商户
							this.showType = true
							this.dataMes.business_name = '中服云商户'
							this.dataMes.business_id = 580
							this.dataMes.business_sn = 'E0010000580'
						} else {
							// 非代理商
							this.showType = false
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$alert('<strong>' + res.data.msg + '</strong>', '提示', {
							dangerouslyUseHTMLString: true
						})
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//获取商户列表
		getMerchants() {
			let fn = new FormData()
			this.$http.post(this.url + '/business/list', fn).then(
				res => {
					// console.log(res.data.data);
					if (res.data.msg == '查询成功!' || res.data.code == '200') {
						if (res.data.data.list != null) {
							res.data.data.list.forEach(item => {
								item.value = item.name
							})
							this.merchantsList = res.data.data.list
						} else {
							this.merchantsList = []
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		submitBtn() {
			// 修改接口
			if (
				this.dataMes.mobile == '' ||
				this.dataMes.name == '' ||
				this.dataMes.role == '' ||
				((this.dataMes.role == 100 || this.dataMes.role == 101) && this.dataMes.business_name == '')
			) {
				this.$message.error('请填写必填项')
				return
			}

			let fn = new FormData()
			// selects
			fn.append('id', this.id)
			fn.append('business_id', this.dataMes.business_id)
			fn.append('business_sn', this.dataMes.business_sn)
			fn.append('shops', this.selects.toString())
			fn.append('mobile', this.dataMes.mobile)
			fn.append('name', this.dataMes.name)
			fn.append('email', this.dataMes.email)
			fn.append('role_id', this.dataMes.role)
			this.$http.post(this.url + '/shopUser/add', fn).then(
				res => {
					// console.log(res);
					if (res.data.msg == '请求成功' || res.data.code == '200') {
						this.$message.success(res.data.msg)
						this.back()
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		//商户的自动完成
		querySearch3(queryString, cb) {
			var restaurants = this.merchantsList
			var results = queryString ? restaurants.filter(this.createFilter3(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter3(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect3(item) {
			this.dataMes.business_name = item.name
			this.dataMes.business_id = item.id
			this.dataMes.business_sn = item.business_sn
		},
		// 门店suggestion
		async shopInput(data) {
			if (!data) {
				return
			}

			try {
				const res = await fetchShopList({
					name: data,
					sign_status: '20,30'
				})

				// 数据合并
				let obj = {}
				this.shopList = [...this.editShopList, ...res.list]
				let newShopList = this.shopList.reduce((cur, next) => {
					obj[next.id] ? '' : (obj[next.id] = true && cur.push(next))
					return cur
				}, [])

				this.shopList = newShopList
			} catch (error) {
				consol.log('error', error)
			}
		}
	},
	filters: {}
}
</script>

<style scoped>
.personnelAdd {
	margin: 15px 15px 0 15px;
}
.row-info {
	padding: 10px 0;
}
.resetBtn,
.btnOK {
	padding: 0 30px;
}
.title-key {
	width: 100px;
}
.list-cont img {
	width: 128px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopUserEdit.vue